<template>
  <div class="card content-box">
    <ECharts :option="option" />
  </div>
</template>

<script setup name="pieChart">
//事件处理情况
import ECharts from "@/components/ECharts/index.vue";
import { dayStatusService } from "@/api/bigdata/index";
import { onMounted, ref } from "vue";
//数据类型
const dayDataList = ref([
  {
    statusCounts: {
      Submitted: 2,
      UnknownStatus: 3,
      PendingProcessing: 0,
      PendingReview: 1,
      Reviewed: 0,
      Processed: 0
    },
    Date: "2024-07-11"
  }
]);

const statusNames = ["已提交", "待审核", "已审核", "待处理", "已处理"];

const getData = async () => {
  let result = await dayStatusService();
  dayDataList.value = result.data.data;
  console.log(dayDataList.value);
};

onMounted(getData);

const option = {
  tooltip: {
    trigger: "item",
    formatter: "{a} <br/>{b} : {c} ({d}%)"
  },
  legend: {
    left: "center",
    top: "bottom",
    data: statusNames,
    textStyle: {
      color: "#a1a1a1"
    }
  },
  toolbox: {
    show: true,
    feature: {
      mark: { show: true },
      dataView: { show: true, readOnly: false },
      restore: { show: true },
      saveAsImage: { show: true }
    }
  },
  series: [
    {
      name: "Status",
      type: "pie",
      radius: [60, 280],
      center: ["50%", "50%"],
      roseType: "radius",
      itemStyle: {
        borderRadius: 5
      },
      label: {
        show: true
      },
      emphasis: {
        label: {
          show: true
        }
      },
      data: Object.entries(statusCounts).map(([key, value]) => ({
        value: value,
        name: key
      }))
    }
  ]
};
</script>

<style scoped lang="scss">
@import "./index";
</style>
